<template>
  <div class="appList" :style="styleSet">
    <div v-for="item in subSystem" :key="item.Id" class="app" @click="switchSystem(item.Id)">
      <span class="icon"><icon :icon="item.Icon" /></span>
      <span class="name">{{ item.Name }}</span>
    </div>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
export default {
  components: {
  },
  props: {
    id: {
      type: String,
      default: null
    },
    width: {
      type: Number,
      default: null
    },
    contentWidth: {
      type: Number,
      default: null
    }
  },
  data() {
    return {
      styleSet: {
        width: '100px'
      }
    }
  },
  computed: {
    ...mapGetters(['subSystem', 'curSysId'])
  },
  watch: {
    width: {
      handler(val) {
        if (val && this.contentWidth) {
          this.init()
        }
      },
      immediate: true
    },
    contentWidth: {
      handler(val) {
        if (val && this.width) {
          this.init()
        }
      },
      immediate: true
    }
  },
  mounted() {
  },
  methods: {
    init() {
      let width = 0
      if (this.width === 23) {
        width = Math.round(this.contentWidth * 2 / 3) - 12
      } else {
        width = Math.round(this.contentWidth / this.width) - 12
      }
      this.styleSet = {
        width: width + 'px'
      }
    },
    switchSystem(value) {
      if (this.curSysId !== value) {
        this.$store.dispatch('user/switchSubSys', value)
      }
      this.$router.push({ name: this.$store.getters.loadRoute })
    }
  }
}
</script>
<style scoped>

.appList{
  height: 140px;
  padding: 10px;
}
.app {
  width: 120px;
  height: 100px;
  padding: 10px;
  margin: 10px;
  border-radius: 15px;
  border: 1px solid #cdcdcd;
  cursor: pointer;
  float: left;
}
.app:hover {
  background-color: #f5f4f4b5;
  border-color: #1890ff;
}
.app .icon {
  display:inline-block;
  width: 100%;
  font-size: 2.5rem;
  line-height: 50px;
  text-align: center;
}
.app .name {
  display:inline-block;
  width: 100%;
  text-align: center;
  line-height: 30px;
}
</style>
